<template>
    <div>
        <city-header></city-header>
        <city-hot :hotCities="hotCities"></city-hot>
        <city-list :allCities="allCities"></city-list>
    </div>
</template>

<script>
import CityHeader from './pages/Header'
import CityHot from './pages/Hot'
import CityList from './pages/List'

export default {
    name : "city-page",
    data(){
        return {
            hotCities : [],
            allCities : []
        }
    },
    components : {
        "city-header" : CityHeader,
        "city-hot" : CityHot,
        "city-list" : CityList
    },
    methods : {
        getCityHandle : function(){
            this.$axios.get("/api/dataCity.json")
                .then(res => {
                    const data = res.data
                    this.hotCities = data.hotCities;
                    this.allCities = data.allCities;
                })
                .catch(err => {
                    console.log(err)
                })
        }
    },
    mounted(){
        this.getCityHandle();
    }
}
</script>

